<!--
 * @Descripttion: 标准化商品库
 * @version:
 * @Author: 张文韬
 * @Date: 2020-10-13 16:34:28
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-13 10:25:00
-->
<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="4">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-menu orgIcon"></i>
            <span>商品目录</span>
          </div>
          <el-tree :data="treeData"
                   :props="defaultProps"
                   :load="loadNode"
                   lazy
                   show-checkbox
                   ref="listTree"
                   node-key="categoryId"
                   class="listTree"
                   :style="treeHeight"
                   highlight-current
                   check-strictly
                   @check-change="handleCheckChange">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card class="content-card">
          <div class="control-area">
            <!-- control 操作区 START -->
            <e-control :search-form-options="formOptions"
                       :search-label-width="searchLabelWidth"
                       :btns="btns"
                       @on-search="searchControlHandle"
                       @on-refresh="refreshControlHandle"
                       @change-height="changeControlHeight"
                       @on-insert="insertControlHandle"
                       @on-setPropsValue="handleSetPropsValue"></e-control>
            <!-- control 操作区 END -->
          </div>
          <e-table :data="tableData"
                     :columns="columns"
                     ref="multipleTable"
                     stripe
                     border
                     :maxHeight="tableMaxHeight"
                     style="width: 100%"
                     @selection-change="changeTableSelectData"
                     :current="pageData.current"
                     :total="pageData.total"
                     @page-size-change="changePageSize"
                     @page-current-change="changePageCurrent">
            <template slot-scope="{scope}"
                      slot="operation">
              <el-tooltip content="编辑"
                          placement="top">
                <el-button @click="updateTableHandle(scope.row)"
                           type="warning"
                           size="mini"
                           icon="el-icon-edit-outline"
                           plain></el-button>
              </el-tooltip>
              <el-tooltip content="商品属性值"
                          placement="top">
                <el-button @click="handleSetPropsValue(scope.row)"
                           type="primary"
                           size="mini"
                           icon="el-icon-document"
                           plain></el-button>
              </el-tooltip>
              <el-tooltip content="采购人采购属性值"
                          placement="top">
                <el-button @click="handleSetPurchase(scope.row)"
                           type="primary"
                           size="mini"
                           icon="el-icon-setting"
                           plain></el-button>
              </el-tooltip>
              
            </template>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="editDialogTitle"
               :visible.sync="editDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="cancelDialogDataHandle"
               width="70%">
      <e-form ref="dialogForm"
              :form-options="editFormOptions"
              :form-label-width="editFormLabelWidth"
              :form-rules="editFormRules"
              :form-data-current="dialogFormCurrent"></e-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelDialogDataHandle">取 消</el-button>
        <el-button type="primary"
                   @click="saveDialogDataHandle">保 存</el-button>
      </span>
    </el-dialog>
    <!--  商品属性值列表  -->
    <el-dialog title="商品属性值列表"
               :visible.sync="tableDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="closeTableDialog"
               width="50%">
      <el-button class="dialog-add-btn" @click="insertDialogTableHandle()"
                 type="success"
                 size="mini"
                 plain>添加</el-button>
      <e-table :data="dialogTableData"
               :columns="dialogColumns"
               ref="multipleTable"
               stripe
               border
               :maxHeight="400"
               style="width: 100%"
               :current="dialogPageData.current"
               :total="dialogPageData.total"
               @page-size-change="changeDialogPageSize"
               @page-current-change="changeDialogPageCurrent">
        <template slot-scope="{scope}" slot="propertyValue">
          <el-popover placement="top" trigger="hover">
            <div class="cell-content">{{scope.row.propertyValue}}</div>
            <p class="overflow" slot="reference">{{scope.row.propertyValue}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}"
                  slot="operation">
          <el-tooltip content="编辑"
                      placement="top">
            <el-button @click="updateDialogTableHandle(scope.row)"
                       type="warning"
                       size="mini"
                       icon="el-icon-edit-outline"
                       plain></el-button>
          </el-tooltip>
          <el-tooltip content="删除"
                      placement="top">
            <el-button @click="deleteDialogTableHandle(scope.row)"
                       type="danger"
                       size="mini"
                       icon="el-icon-delete"
                       plain></el-button>
          </el-tooltip>
        </template>
      </e-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelPurchaseDialogDataHandle">确定</el-button>
        <!--<el-button type="primary"-->
                   <!--@click="saveTableDialogDataHandle">保 存</el-button>-->
      </span>
    </el-dialog>
    <el-dialog :title="editDialogTitle"
               :visible.sync="editTableDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="cancelTableDialogDataHandle"
               width="50%">
      <e-form ref="tableDialogForm"
              :form-options="editTableFormOptions"
              :form-label-width="editTableFormLabelWidth"
              :form-rules="editFormOptionsRules"
              :form-data-current="tableDialogFormCurrent"></e-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelTableDialogDataHandle">取 消</el-button>
        <el-button type="primary"
                   @click="saveTableDialogDataHandle">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 设置采购人采购属性值列表  -->
    <el-dialog title="采购人采购属性值列表"
               :visible.sync="purchaseDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="closePurchaseTableDialog"
               width="60%">
      <el-button class="dialog-add-btn" @click="insertPurchaseProperty()"
                 type="success"
                 size="mini"
                 plain>添加</el-button>
      <e-table :data="purchaseTableData"
               :columns="purchaseDialogColumns"
               ref="purchaseTable"
               stripe
               border
               :maxHeight="400"
               style="width: 100%"
               :current="purchaseDialogPageData.current"
               :total="purchaseDialogPageData.total"
               @page-size-change="changePurchaseDialogPageSize"
               @page-current-change="changePurchaseDialogPageCurrent">
        <template slot-scope="{scope}" slot="propertyValuePurchaser">
          <el-popover placement="top" trigger="hover">
            <div class="cell-content">{{scope.row.propertyValuePurchaser}}</div>
            <p class="overflow" slot="reference">{{scope.row.propertyValuePurchaser}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}" slot="propertyValueSearch">
          <el-popover placement="top" trigger="hover">
            <div class="cell-content">{{scope.row.propertyValueSearch}}</div>
            <p class="overflow" slot="reference">{{scope.row.propertyValueSearch}}</p>
          </el-popover>
        </template>
        <template slot-scope="{scope}"
                  slot="operation">
          <el-tooltip content="编辑"
                      placement="top">
            <el-button @click="updatePurchaseDialogTableHandle(scope.row)"
                       type="warning"
                       size="mini"
                       icon="el-icon-edit-outline"
                       plain></el-button>
          </el-tooltip>
          <el-tooltip content="删除"
                      placement="top">
            <el-button @click="deletePurchaseDialogTableHandle(scope.row)"
                       type="danger"
                       size="mini"
                       icon="el-icon-delete"
                       plain></el-button>
          </el-tooltip>
        </template>
      </e-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelDialogDataHandle">确定</el-button>
        <!--<el-button type="primary"-->
        <!--@click="saveTableDialogDataHandle">保 存</el-button>-->
      </span>
    </el-dialog>
    <el-dialog :title="editPurchaseDialogTitle"
               :visible.sync="editPurchaseTableDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="cancelPurchaseTableDialogDataHandle"
               width="50%">
      <e-form ref="tablePurchaseDialogForm"
              :form-options="editPurchaseTableFormOptions"
              :form-label-width="editPurchaseTableFormLabelWidth"
              :form-rules="editPurchaseFormRules"
              :form-data-current="tablePurchaseDialogFormCurrent"></e-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelPurchaseTableDialogDataHandle">取 消</el-button>
        <el-button type="primary"
                   @click="savePurchaseTableDialogDataHandle">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import eManage from '@/components/e-manage'
  import eControl from '@/components/e-control'
  import eForm from '@/components/e-form'
  import { formOptions, btns } from './control'
  import { columns, dialogColumns, purchaseDialogColumns } from './columns'
  import { editFormOptions, editTableFormOptions, editFormOptionsRules, editFormRules, editPurchaseTableFormOptions, editPurchaseFormRules} from './form'
  import {
    getQueryItemTrees,
    queryGoodsPropertyList,
    getAllInputType,
    editGoodsProperty,
    addGoodsProperty,
    getAllItemRules,
    queryGoodsPropertyValueList,
    editGoodsPropertyValue,
    addGoodsPropertyValue,
    propertyValuePurchaserList,
    propertyValuePurchaserAdd,
    propertyValuePurchaserEdit,
    deletePropertyValue,
    deletePropertyValuePurchaser
  } from '@/api/admin.api'
  export default {
    name: 'standardized-commodity-library',
    components: {
      eManage,
      eControl,
      eForm
    },
    data() {
      return {
        formOptions,
        searchLabelWidth: '180px',
        btns,
        columns,
        // 弹出框表单
        dialogColumns,
        editFormOptions,
        editFormOptionsRules,
        editTableFormOptions,
        editFormLabelWidth: '200px',
        editTableFormLabelWidth: '120px',
        editFormRules,
        
        // 编辑框是否展示
        editDialogShow: false,
        // 编辑框类型 0:新增;1:修改;
        editDialogType: 0,
        // 编辑框表单数据
        dialogFormCurrent: {
          isMain: '1',
          isPurchaserMust: '1',
          isSupplierMust: '1',
          v: '1',
          isSearch: '1',
          isPurchaseSearch: '1',
          columnType: 'varchar'
        },
        // 查询表单
        searchFormData: {},
        // 控制区高度
        controlHeight: 0,
        // 表格数据
        tableData: [],
        // 分页数据
        pageData: {
          // 当前分页
          pageNum: 1,
          // 分页条数
          pageSize: 10,
          // 数据总数
          total: 0
        },
        // 表格选中数据
        tableSelectData: [],

        // 弹出框列表的编辑框类型 0:新增;1:修改;
        tableDialogType: 0,
        // 弹出框列表的控制弹出框显示
        tableDialogShow: false,
        // 弹出框列表的初始化数据
        tableDialogFormCurrent: {
          v: '1'
        },
        // 弹出框列表的分页信息
        dialogPageData: {
          // 当前分页
          pageNum: 1,
          // 分页条数
          pageSize: 10,
          // 数据总数
          total: 0
        },
        // 弹出框列表的数据源
        dialogTableData: [],
        // 弹出框列表的选中数据
        dialogTableSelectData: [],
        // 弹出列表页的弹出编辑框
        editTableDialogShow: false,
        // 当前属性（设置属性值使用）
        currentProperty: {},
        // 左侧树数据源
        treeData: [],
        // 树配置项
        defaultProps: {
          children: 'children',
          label: 'label',
          check: false,
          isLeaf: 'leaf',
          categorylevel: 1,
          categoryId: 'id'
        },
        // 左侧树选中目录
        treeSelectData: '',
        // 左侧树样式
        leftTree: {
          'height': window.innerHeight - 100 + 'px',
          'overflowY': 'scroll'
        },
        
        
        // 弹出采购人采购属性值列表
        purchaseDialogShow:false,
        // 采购人采购属性值列表数据
        purchaseTableData:[],
        purchaseDialogColumns,
        // 弹出框采购属性值列表的分页信息
        purchaseDialogPageData: {
          // 当前分页
          pageNum: 1,
          // 分页条数
          pageSize: 10,
          // 数据总数
          total: 0
        },
        // 当前采购人采购属性值
        purchaseCurrentProperty: {},
        // 弹出框采购属性值列表的编辑框类型 0:新增;1:修改;
        purchaseTableDialogType: 0,
        editPurchaseTableDialogShow: false,
        editPurchaseTableFormLabelWidth:'120px',
        editPurchaseTableFormOptions,
        editPurchaseFormRules,
        tablePurchaseDialogFormCurrent:{}
      }
    },
    watch: {},
    computed: {
      // 组合查询条件和分页
      searchData () {
        const { pageNum, pageSize } = this.pageData
        return { ...this.searchFormData, size: pageSize, current: pageNum }
        // return Object.assign(this.searchFormData,{size: pageSize},{current:pageNum})
      },
      // 属性表单实例
      dialogForm () {
        return this.$refs.dialogForm
      },
      // 属性值表单实例
      tableDialogForm () {
        return this.$refs.tableDialogForm
      },
      // 属性值表单实例
      purchaseTableDialogForm () {
        return this.$refs.tablePurchaseDialogForm
      },
      //表格最大高度
      tableMaxHeight () {
        return window.innerHeight - this.controlHeight - 160
      },
      // 编辑框标题
      editDialogTitle () {
        return this.editDialogType === 0 ? '新增' : '编辑'
      },
      editPurchaseDialogTitle () {
        return this.purchaseTableDialogType === 0 ? '新增' : '编辑'
      },
      // 左侧树
      treeHeight () {
        return {
          'height': window.innerHeight,
          'overflowY': 'scroll'
        }
      },
      treeRef () {
        return this.$refs['listTree']
      }
    },
    created() {
      this.init()
    },
    methods: {
      /**
       * @functionName init
       * @description 页面初始化
       * @author 张航
       * @date 2020-09-09 08:40:06
       * @version V1.0.0
       */
      init () {
        // this.getTableData()
        this.getOrgTreeEvent()
        this.getLabelData()
      },
      /**
       * @functionName searchControlHandle
       * @param {Object} data 查询参数
       * @description 查询
       * @author 张航
       * @date 2020-09-08 15:01:26
       * @version V1.0.0
       */
      searchControlHandle (data) {
        this.searchFormData = data
        // console.log(data)
        this.refreshPageCurrent()
      },
      /**
       * @functionName refreshControlHandle
       * @param {Object} data 重置后的数据
       * @description 重置查询条件
       * @author 张航
       * @date 2020-09-08 17:01:51
       * @version V1.0.0
       */
      refreshControlHandle (data) {
        // console.log(data)
        this.searchFormData = data
      },
      /**
       * @functionName changeControlHeight
       * @param {String} height 控制区占用高度
       * @description 控制区高度变化
       * @author 张航
       * @date 2020-09-16 16:17:07
       * @version V1.0.0
       */
      changeControlHeight (height) {
        this.controlHeight = height
      },
      /**
       * @functionName insertControlHandle
       * @description 点击新增按钮
       * @author 张航
       * @date 2020-09-08 17:35:28
       * @version V1.0.0
       */
      insertControlHandle () {
        if (this.treeSelectData.length > 0) {
          this.openDialog()
        }
        else {
          this.$alert('请选择商品目录！', '提示', {
            confirmButtonText: '确定'
          })
        }
      },
      /**
       * @functionName insertControlHandle
       * @description 点击新增按钮
       * @author 张航
       * @date 2020-09-08 17:35:28
       * @version V1.0.0
       */
      insertDialogTableHandle () {
        this.openTableDialog()
      },
      /**
       * @description
       * @author 穆宏宇
       * @date 2020-11-24 14:06:21
       * @param
       * @return
       * */
      insertPurchaseProperty () {
        this.purchaseTableDialogType = 0
        this.editPurchaseTableDialogShow = true
      },
      /**
       * @functionName changeTableSelectData
       * @param {Array} rows 选中数据
       * @description 表格选中数据改变
       * @author 张航
       * @date 2020-09-08 17:52:12
       * @version V1.0.0
       */
      changeTableSelectData (rows) {
        this.tableSelectData = rows
      },
      /**
       * @functionName changePageSize
       * @param {Number} size 分页条数
       * @description 修改分页条数
       * @author 张航
       * @date 2020-09-08 17:57:06
       * @version V1.0.0
       */
      changePageSize (size) {
        this.pageData.pageSize = size
        this.getTableData()
      },
      // 修改弹出列表分页条数
      changeDialogPageSize (size) {
        this.dialogPageData.pageSize = size
        this.getDialogTableData(this.currentProperty.id)
      },
      // 弹出框采购属性值列表的分页条数
      changePurchaseDialogPageSize (size) {
        this.purchaseDialogPageData.pageSize = size
        this.getPurchaseDialogTableData(this.purchaseCurrentProperty.id)
      },
      /**
       * @functionName changePageCurrent
       * @param {Number} current 当前分页
       * @description 修改当前分页
       * @author 张航
       * @date 2020-09-08 18:02:03
       * @version V1.0.0
       */
      changePageCurrent (current) {
        this.pageData.pageNum = current
        this.getTableData()
      },
      // 弹出框列表的当前页
      changeDialogPageCurrent (current) {
        this.dialogPageData.pageNum = current
        this.getDialogTableData(this.currentProperty.id)
      },
      // 弹出框采购属性值列表的当前页
      changePurchaseDialogPageCurrent (current) {
        this.purchaseDialogPageData.pageNum = current
        this.getPurchaseDialogTableData(this.purchaseCurrentProperty.id)
      },
      /**
       * @functionName refreshPageCurrent
       * @description 重置当前分页
       * @author 张航
       * @date 2020-09-22 10:45:57
       * @version V1.0.0
       */
      refreshPageCurrent () {
        this.pageData.pageNum = 1
        this.getTableData()
      },
      // 弹出框列表重置当前分页
      refreshDialogPageCurrent () {
        this.dialogPageData.pageNum = 1
        this.getDialogTableData(this.currentProperty.id)
      },
      /**
       * @functionName getTableData
       * @description 获取表格数据
       * @author 张文韬
       * @date 2020-10-30 17:59:45
       * @version V1.0.0
       */
      getTableData () {
        // console.log(this.searchData)
        // console.log(this.treeSelectData)
        const catagoryId = this.treeSelectData
        if (catagoryId.length > 0) {
          queryGoodsPropertyList(catagoryId, this.searchData).then(res => {
            this.tableData = res.records
            this.pageData.total = res.total
          })
        }
        else {
          this.$message({
            message: '请选择商品类型',
            type: 'warning'
          })
        }
      },
      // 获取选项数据
      getLabelData () {
        // 获取商品输入类型
        getAllInputType().then(res=>{
         // console.log(res)
          res.map((item, index) => {
            const optionObj = {}
            optionObj.label = item.optional1
            optionObj.value = item.dictionaryKey1
            this.$set(editFormOptions[0].options, index, optionObj)
            this.$set(editFormOptions[1].options, index, optionObj)
            this.$set(formOptions[1].options, index, optionObj)
          })
        })
        getAllItemRules().then(res=>{
          // console.log(res)
          res.map((item, index) => {
            const optionObj = {}
            optionObj.label = item.ruleName
            optionObj.value = item.id
            this.$set(editFormOptions[2].options, index, optionObj)
            this.$set(editFormOptions[3].options, index, optionObj)
          })
        })
      },
      /**
       * @functionName getTableData
       * @description 获取弹框表格数据
       * @author 张文韬
       * @date 2020-09-08 17:59:45
       * @version V1.0.0
       */
      getDialogTableData (propId) {
        const { pageNum, pageSize } = this.dialogPageData
        queryGoodsPropertyValueList(propId,{size: pageSize, current: pageNum }).then(res => {
          this.dialogTableData = res.records
          this.dialogPageData.total = res.total
        })
      },
      // 获取组织树
      getOrgTreeEvent () {
        getQueryItemTrees({ categorylevel: '1' }).then((res) => {
          const newArr = []
          res.map(item => {
            const obj = {}
            obj.label = item.category_name
            obj.categoryId = item.id
            obj.categorylevel = item.category_level + 1
            obj.check = item.check
            newArr.push(obj)
          })
          this.treeData = newArr
        })
      },
      // 提交添加属性数据
      addProperty (data) {
        addGoodsProperty(data).then(res => {
          // console.log(res)
          this.dialogForm.handleRefresh()
          this.closeDialog()
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.refreshPageCurrent()
        })
      },
      // 提交编辑属性数据
      updateProperty (data) {
        editGoodsProperty(data).then(res => {
          // console.log(res)
          this.dialogForm.handleRefresh()
          this.closeDialog()
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.refreshPageCurrent()
        })
      },
      /**
       * @functionName updateTableHandle
       * @param {Object} row 当前行数据
       * @description 表格编辑按钮
       * @author 张航
       * @date 2020-09-14 16:43:26
       * @version V1.0.0
       */
      updateTableHandle (row) {
        this.dialogFormCurrent = { ...row }
        this.openDialog(1)
      },
      updateDialogTableHandle (row) {
        this.tableDialogFormCurrent = { ...row }
        this.openTableDialog(1)
      },
      // 删除商品属性值
      deleteDialogTableHandle (row) {
        deletePropertyValue(row.id).then(()=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getDialogTableData(this.currentProperty.id)
        })
      },
      // 修改采购属性值
      updatePurchaseDialogTableHandle (row) {
        this.tablePurchaseDialogFormCurrent = {...row}
        this.purchaseTableDialogType = 1
        this.editPurchaseTableDialogShow = true
      },
      // 删除采购属性值
      deletePurchaseDialogTableHandle (row) {
        deletePropertyValuePurchaser(row.id).then(()=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getPurchaseDialogTableData(this.purchaseCurrentProperty.id)
        })
      },
      // 懒加载左侧tree
      loadNode (node, resolve) {
        if (node.level === 1) {
          getQueryItemTrees({ categorylevel: node.data.categorylevel, categoryId: node.data.categoryId }).then((res) => {
            const secArr = []
            res.map(item => {
              const obj = {}
              obj.label = item.category_name
              obj.categoryId = item.id
              obj.categorylevel = item.category_level + 1
              obj.check = item.check
              secArr.push(obj)
            })
            return resolve(secArr)
          })
        }
        if (node.level === 2) {
          getQueryItemTrees({ categorylevel: node.data.categorylevel, categoryId: node.data.categoryId }).then((res) => {
            const thrArr = []
            res.map(item => {
              const obj = {}
              obj.label = item.category_name
              obj.categoryId = item.id
              obj.categorylevel = item.category_level + 1
              obj.check = item.check
              obj.leaf = true
              thrArr.push(obj)
            })
            return resolve(thrArr)
          })
        }
      },
      // 上传属性值
      submmitPropertyValue () {
        const property = this.currentProperty
        const params = {
          ...this.tableDialogForm.formData,
          fkGodPropertyId: property.id,
        }
        if (this.tableDialogType === 0) {
          addGoodsPropertyValue(params).then(res => {
            this.tableDialogForm.handleRefresh()
            this.closeTableDialog()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.refreshDialogPageCurrent()
          })
        }
        else {
          editGoodsPropertyValue(params).then(res => {
            this.tableDialogForm.handleRefresh()
            this.closeTableDialog()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.refreshDialogPageCurrent()
          })
        }
      },
      /**
       * @functionName openDialog
       * @param {Number} type 编辑框类型;0:新增;1:编辑;
       * @description 打开编辑框
       * @author 张航
       * @date 2020-09-08 11:38:51
       * @version V1.0.0
       */
      openDialog (type = 0) {
        this.editDialogType = type
        if (type === 2) {
          this.tableDialogShow = true
        }
        else {
          this.editDialogShow = true
        }
      },
      openTableDialog (type = 0) {
        this.tableDialogType = type
        this.editTableDialogShow = true
      },
      /**
       * @functionName closeDialog
       * @description 关闭编辑框
       * @author 张航
       * @date 2020-09-08 14:27:02
       * @version V1.0.0
       */
      closeDialog () {
        if (this.editDialogType === 2) {
          this.tableDialogShow = false
        }
        else {
          this.editDialogShow = false
        }
        this.editDialogType = 0
      },
      /**
       * @functionName closeDialog
       * @description 关闭弹出列表的弹出编辑框
       * @author 张航
       * @date 2020-09-08 14:27:02
       * @version V1.0.0
       */
      closeTableDialog () {
        this.editTableDialogShow = false
        this.tableDialogType = 0
      },
      /**
       * @description 关闭弹出采购人采购属性值列表
       * @author 穆宏宇
       * @date 2020-11-24 15:47:04
       * @param
       * @return
       * */
      closePurchaseTableDialog () {
        this.purchaseDialogShow = false
        this.purchaseTableDialogType = false
      },
      /**
       * @functionName saveDialogData
       * @description 保存弹框数据
       * @author 张航
       * @date 2020-09-08 18:15:14
       * @version V1.0.0
       */
      saveDialogDataHandle () {
        // console.log(this.dialogForm.formData)
        this.$refs['dialogForm'].handleValidate((valid) => {
          if (!valid) {
            this.$message({
              message: '请检查表单填写内容',
              type: 'warning'
            })
            return
          }
          if (this.editDialogType === 0) {
            const data = {
              ...this.dialogForm.formData,
              fkItemCategoryId: this.treeSelectData
            }
            this.addProperty(data)
          }
          else if (this.editDialogType === 1) {
            const data = {
              ...this.dialogForm.formData,
            }
            this.updateProperty(data)
          }
        })
      },
      // 弹出框列表保存弹框数据
      saveTableDialogDataHandle () {
        const self = this
        this.tableDialogForm.handleValidate( v => {
          if (v) {
            self.submmitPropertyValue()
          }
        })
      },
      // 处理采购人采购属性值新增
      savePurchaseTableDialogDataHandle () {
        const self = this
        this.purchaseTableDialogForm.handleValidate( v => {
          if (v) {
            // 新增
            if (self.purchaseTableDialogType === 0) {
              propertyValuePurchaserAdd({
                ...self.purchaseTableDialogForm.formData,
                fkGodPropertyId:self.purchaseCurrentProperty.id
              })
              .then(()=>{
                self.$message({
                  message: '添加成功',
                  type: 'success'
                })
                self.purchaseTableDialogForm.handleRefresh()
                self.editPurchaseTableDialogShow = false
                self.getPurchaseDialogTableData(self.purchaseCurrentProperty.id)
              })
            }
            // 编辑
            if (self.purchaseTableDialogType === 1) {
              propertyValuePurchaserEdit({
                ...self.purchaseTableDialogForm.formData,
                id:self.tablePurchaseDialogFormCurrent.id,
                fkGodPropertyId:self.purchaseCurrentProperty.id
              })
                .then(()=>{
                  self.$message({
                    message: '修改成功',
                    type: 'success'
                  })
                  self.purchaseTableDialogForm.handleRefresh()
                  self.editPurchaseTableDialogShow = false
                  self.getPurchaseDialogTableData(self.purchaseCurrentProperty.id)
                })
            }
          }
        })
      },
      /**
       * @functionName cancelDialogData
       * @description 取消保存弹框数据
       * @author 张航
       * @date 2020-09-08 18:17:11
       * @version V1.0.0
       */
      cancelDialogDataHandle () {
        if (this.dialogForm) {
          this.dialogForm.handleRefresh()
          this.dialogFormCurrent = {
            isMain: '1',
            isPurchaserMust: '1',
            isSupplierMust: '1',
            v: '1',
            isSearch: '1',
            isPurchaseSearch: '1',
            columnType: 'varchar'
          }
        }
        this.closeDialog()
      },
      /**
       * @description
       * @author 穆宏宇
       * @date 2020-11-24 15:50:21
       * @param
       * @return
       * */
      cancelPurchaseDialogDataHandle () {
        if (this.tableDialogForm) {
          this.tableDialogForm.handleRefresh()
          this.dialogFormCurrent = {
            isMain: '1',
            isPurchaserMust: '1',
            isSupplierMust: '1',
            v: '1',
            isSearch: '1',
            isPurchaseSearch: '1',
            columnType: 'varchar'
          }
        }
        this.closeDialog()
      },
      // 处理点击取消按钮
      cancelTableDialogDataHandle () {
        if (this.tableDialogForm) {
          this.tableDialogForm.handleRefresh()
        }
        this.tableDialogFormCurrent = { v: '1' }
        this.closeTableDialog()
      },
      // 处理采购人采购属性值关闭
      cancelPurchaseTableDialogDataHandle () {
        if (this.purchaseTableDialogForm) {
          this.purchaseTableDialogForm.handleRefresh()
        }
        this.tablePurchaseDialogFormCurrent = { v: '1' }
        this.editPurchaseTableDialogShow = false
        this.purchaseTableDialogType = 0
      },
      // 选择树节点
      handleCheckChange (data, value) {
        if (value === true) {
          const ids = this.treeRef.getCheckedKeys()
          if (ids.length > 1) {
            ids.map((item) => {
              if (item === data.categoryId) {
                this.treeRef.setChecked(item, true, false)
              }
              else {
                this.treeRef.setChecked(item, false, false)
              }
            })
          }
          if (ids.length > 0 && value === true) {
            this.treeSelectData = data.categoryId
            this.getTableData()
          }
        }
      },

      /**
       * @description 处理设置属性值点击事件
       * @author 张文韬
       * @date 2020-10-13 17:25:49
       * @return
       * */
      handleSetPropsValue (row) {
        this.openDialog(2)
        this.currentProperty = row
        this.getDialogTableData(this.currentProperty.id)
      },
      /**
       * @description 设置采购人采购属性值列表
       * @author 穆宏宇
       * @date 2020-11-24 14:29:29
       * @param
       * @return
       * */
      handleSetPurchase (row) {
        this.purchaseCurrentProperty = {...row}
        this.getPurchaseDialogTableData(this.purchaseCurrentProperty.id)
        this.purchaseDialogShow = true
      },
      /**
       * @description 获取采购人采购属性值列表
       * @author 穆宏宇
       * @date 2020-11-24 15:01:17
       * @param
       * @return
       * */
      getPurchaseDialogTableData(id) {
        const { pageNum, pageSize } = this.purchaseDialogPageData
        propertyValuePurchaserList(id,{size: pageSize, current: pageNum }).then(res=>{
          this.purchaseTableData = res.records
          this.purchaseDialogPageData.total = res.total
        })
      }
    }
  }
</script>

<style lang="scss">
  .box-card {
    margin: 4px;
    height: calc(100vh - 120px);
    overflow: scroll;

    .listTree .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }

      .el-checkbox__input > .el-checkbox__inner {
        display: none;
      }
    }

  }
  .content-card{
    overflow: scroll;
    margin: 4px;
    height: calc(100vh - 120px);
    .el-card__body {
      padding: 10px;
    }
    .el-table {
      margin-top: 20px;
    }
    .el-pagination {
      text-align: right;
    }
    .control-area{
      margin-bottom: 10px;
    }
  }
  .abc-header {
    color: #0000ff;
  }
  .abc {
    font-weight: bold;
    color: #e53939;
  }
  .selectRole {
    padding: 30px;
    box-sizing: border-box;
    .el-select {
      width: 100%;
    }
  }
  .dialog-add-btn{
    margin: 10px;
  }
  .cell-content {
    width: 200px;
    min-height: 20px;
    max-height: 200px;
    overflow-y: auto;
  }
  .overflow {
    width: 100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
  }
</style>

